<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta name="referrer" content="never">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <style>
        img{width:120px;height:160px}
        p{font-size:12px;}
        .item{float: left;}
        #app{
            width:740px;margin-left: auto;
            margin-right: auto;
        }
        #app .item{
            margin-right: 20px; margin-top: 10px;
            border:1px solid #eee;
            border-radius: 15px;
        }
        h4{clear: both;color: #258dcd;text-align: center;cursor: pointer;}
    </style>
</head>
<body>
    <div id="app">
        <div class="item" v-for="item of movies">
            <img :src="item.images.small" alt="">
            <p>{{item.title}}</p>
        </div>
        <h4 @click="loadMore">加载更多</h4>
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                movies:[]
            },
            created(){
                $.ajax({
                    url:"http://douban.uieee.com/v2/movie/top250",
                    dataType:"jsonp",
                    success:res=>{
                        this.movies = res.subjects;
                        console.log(this.movies)
                    }
                })
            },
            methods:{
                loadMore(){
                    var length = this.movies.length;
                    $.ajax({
                        url:`http://douban.uieee.com/v2/movie/top250?start=${length}&count=20`,
                        dataType:"jsonp",
                        success:res=>{
                            var arr = res.subjects;
                            var movies  = this.movies;
                            movies.push(...arr)
                            this.movies = movies
                        }
                    })
                }
            }
        })
    </script>
</body>
</html>